/**
 * @description 用户画像》用户详情页
 *@author yhw
 */
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './HomePage.less';
import MainLayout from '../components/MainLayout/MainLayout';
import {Row, Col,Tooltip,Icon,DatePicker,Button,Radio} from 'antd';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const {RangePicker,MonthPicker} = DatePicker;
const dateFormat = 'YYYY-MM-DD';
let personType=1, startDate=(new Date()).formatAdd(-6), endDate=(new Date()).formatAdd(0),tipContent="用户活跃度是指某个用户在与品牌进行互动过程中体现的积极程度的评估，活跃度是0-1之间的值";;

function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"), hash = window.location.hash;
  var r = hash.substring(hash.indexOf('?')+1).match(reg);
  if (r != null) return unescape(unescape(r[2])); return null;
}

class UserView extends Component {
	constructor(props) {
	    super(props);
	}

	fetchData(type, search){
		this.props.dispatch({
		        type: type,
		        payload: search
		})
	};

	componentWillMount() {
		this.initData();
		this.fetchData('UserView/openidQuery', 'openId='+getQueryString("openid"));
	};

	initData(){
		let date = 'starttime='+startDate+'&endtime='+endDate, uid=getQueryString("uid");

		switch(parseInt(personType)){
			case 1:{
				this.fetchData('UserView/activeQuery',date+'&userUid='+uid);
				tipContent=(<span>用户活跃度是指用户在与品牌进行互动的过程中体现的积极程度的评估，<br />活跃度是0-1之间的值</span>);"";
				break;
			}
			case 2:{
				this.fetchData('UserView/valueQuery',date+'&userUid='+uid);
				tipContent=(<span>用户价值是评价某个用户对于品牌价值的指标，此价值既包含传播价值也包含购买力价值。<br />得到的数值越高，说明用户对于品牌的价值越大</span>);
				break;
			}
			case 3:{
				this.fetchData('UserView/productQuery',date+'&userUid='+uid);
				tipContent="产品喜好是指根据某个用户历史购买产品信息计算得到的产品品类倾向偏好程度";
				break;
			}
		}
	};

	onDateChange(date, dateString) {
		startDate=dateString[0];
		endDate=dateString[1];
	};

	topOk(){
		this.initData();
	};

	onRadioChange(e) {
	  	personType = e.target.value;
	  	this.initData();
	};

	render(){
	  return (
	    <MainLayout isShowLeft="showNo">
	    <div className={styles.wrap}>
	      <p className={styles.back}>
	      	<a href="javascript:history.back();"><i className="anticon anticon-left"></i>返回</a>
	      </p>
	      <Row gutter={40} style={{marginTop:"18px"}}>
	            <Col className="gutter-row" span={6}>
	              <div className="gutter-box">
	              	<div className={styles.head}></div>
	              	<ul className={styles.userinfo}>
	              		<li><i className={styles.mico1}></i>{this.props.UserView.openidData.nick_name}<span className={styles.user +" " + (this.props.UserView.openidData.sex == 2 ?styles.boy:styles.girl)}></span></li>
	              		<li><i className={styles.mico2}></i>{this.props.UserView.openidData.weixin}</li>
	              		<li><i className={styles.mico3}></i>{this.props.UserView.openidData.uid}</li>
	              		<li><i className={styles.mico4}></i>{this.props.UserView.openidData.contact}</li>
	              		<li><i className={styles.mico5}></i>{this.props.UserView.openidData.province+"  "+this.props.UserView.openidData.city}</li>
	              		<li><i className={styles.mico6}></i>{localStorage.getItem('imgTypeValue')}</li>
	              		<li><i className={styles.mico7}></i>{this.props.UserView.openidData.aihao}</li>
	              	</ul>
	              </div>
	            </Col>
	            <Col className="gutter-row" span={18}>
	              <div className="gutter-box">
	              	<RangePicker style={{ width: 200,verticalAlign:'middle' }} onChange={this.onDateChange.bind(this)} defaultValue={[moment(startDate, dateFormat), moment(endDate, dateFormat)]} format={dateFormat}/>
	      			<Button type="primary" onClick={this.topOk.bind(this)} className= {styles.searchOk}>确定</Button>
				<div style={{padding:"26px 0 0"}}>
					<RadioGroup onChange={this.onRadioChange.bind(this)} defaultValue="1">
					      <RadioButton value="1">活跃度</RadioButton>
					      <RadioButton value="2">用户价值</RadioButton>
					      <RadioButton value="3">产品喜好</RadioButton>
					</RadioGroup>&nbsp;&nbsp;
					<Tooltip placement="right" title={tipContent}>
					        <Icon type="question-circle-o" style={{color:"#fff"}} />
					</Tooltip>
				</div>
			      	{this.props.UserView.chartLineData}
	              </div>
	            </Col>
	      </Row>		    
		</div>
	    </MainLayout>
	  );
	}
}

function mapStateToProps({UserView}){
	return {UserView: {...UserView}}
}

export default connect(mapStateToProps)(UserView)

// (localStorage.getItem('imgType')=="life_cycle"?"生命周期":"会员等级")+"   "+